<template>
  <div class="all">
    <ul class="head-ul">
      <li>幸运魔方游戏设置</li>
    </ul>
    <div class="R-body">
      <table width="100%">
        <tbody>

          <tr>
            <td class="R-right">是否启用</td>
            <td>
              <el-radio-group v-model="luckyCube.state">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-for="(val, index) in luckyCube.data">
            <td class="R-right">礼物{{name[index]}}</td>
            <td>
              <div style="display: inline-block;">礼物名称
                <el-select v-model="val.giftName" placeholder="请选择">
                  <el-option v-for="item in Lgiflist" :key="item.id" :label="item.giftName" :value="item.giftName"
                    :disabled="item.disabled">
                    <span style="width: 50px;display: inline-flex;">{{item.giftName}} </span>
                    <span><img :src="item.giftIcon" alt=""></span>
                    <span>价值{{item.needCoin}}幸运币 </span>
                  </el-option>
                </el-select>
              </div>
              <span>概率<input type="text" size="3" v-model="val.odds"></span>
              <span>是否开启暴灯
                <el-radio-group v-model="val.isBaodeng">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
      <el-button type="primary" @click="subim(luckyCube)">提交</el-button>
      <ul class="head-ul">
        <li>钻石魔方游戏设置</li>
      </ul>
      <div class="R-body">
        <table width="100%">
          <tbody>

            <tr>
              <td class="R-right">是否启用</td>
              <td>
                <el-radio-group v-model="diamondCube.state">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr v-for="(val, index) in diamondCube.data">
              <td class="R-right">礼物{{name[index]}}</td>
              <td>
                <div style="display: inline-block;">礼物名称
                  <el-select v-model="val.giftName" filterable placeholder="请选择">
                    <el-option v-for="item in Lgiflist" :key="item.id" :label="item.giftName" :value="item.giftName">
                      <span style="width: 50px;display: inline-flex;">{{item.giftName}} </span>
                      <span><img :src="item.giftIcon" alt=""></span>
                      <span>价值{{item.needCoin}}幸运币 </span>
                    </el-option>
                  </el-select>
                </div>
                <span>概率<input type="text" size="3" v-model="val.odds"></span>
                <span>是否开启暴灯
                  <el-radio-group v-model="val.isBaodeng">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </span>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <el-button type="primary" @click="subim(diamondCube)">提交</el-button>
    </div>
  </div>
</template>

<script>
  import {
    cube_getAll,
    getAll,
    cube_mod
  } from '@/utils/API'
     import Cookies from 'js-cookie'
  export default {
    data() {
      return {
        luckyCube: {
          state: 1,
          data: []
        },
        diamondCube: {
          state: 2,
          data: []
        },
        name: ['一', '二', '三', '四', '五', '六', '七', '八'],
        Dgiflist: [],
        Lgiflist: [],
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        }
      }
    },
    methods: {
      // @change="luckyList(val.giftName,index)"
      subim(e) {
        var i = 0
        const arr = []
        var _this = this
        console.log(e)

        e.data.forEach(val => {
          val.enable = Number(e.state)
		  _this.giflist.forEach(item=>{
		  	if(item.giftName == val.giftName){
		  		val.giftId = item.id
		  		val.url = item.giftIcon
				if (val.giftId != "" && val.giftName != "" && val.url != "" && val.odds != "" && val.isBaodeng == 0 ||
				  val.isBaodeng == 1 && val.enable != "") {
				  val.isBaodeng = Number(val.isBaodeng)
				  val.odds = Number(val.odds)
				  arr.push(val)
				} else {
				  this.$message.error('数据错误')
				  return
				}
		  	}
		  })

        })
        cube_mod(arr,this.admin).then(res => {
          if (res.code == 0) {
            this.$message.success('修改成功')
          }
        })
        console.log(arr)
      },
      // //幸运判断
      // luckyList(e, p) {
      //   var arr = []
      //   this.Lgiflist = this.giflist
      //   for (let o = 0; o < this.luckyCube.data.length; o++) {
      //     if (o != p && this.luckyCube.data[o].giftName == e) {
      //       this.$message.error('重复出现')
      //       this.luckyCube.data[p].giftName = ''
      //       return
      //     }
      //   }
      //   for (let i = 0; i < this.Lgiflist.length; i++) {
      //     if (this.Lgiflist[i].giftName == e) {
      //       this.luckyCube.data[p].giftId = this.Lgiflist[i].id
      //       this.luckyCube.data[p].url = this.Lgiflist[i].giftIcon
      //     }
      //   }
      //   // console.log(this.luckyCube.data)
      // },
      // //钻石判断
      // diamondList(e, p) {
      //   var arr = []
      //   this.Lgiflist = this.giflist
      //   for (let o = 0; o < this.diamondCube.data.length; o++) {
      //     if (o != p && this.diamondCube.data[o].giftName == e) {
      //       this.$message.error('重复出现')
      //       this.diamondCube.data[p].giftName = ''
      //       return
      //     }
      //   }
      //   for (let i = 0; i < this.Lgiflist.length; i++) {
      //     if (this.Lgiflist[i].giftName == e) {
      //       this.diamondCube.data[p].giftId = this.Lgiflist[i].id
      //       this.diamondCube.data[p].url = this.Lgiflist[i].giftIcon
      //     }
      //   }
      //   // console.log(this.diamondCube.data)
      // },
    },
    mounted() {
      // this.Postdata()
      cube_getAll(this.admin).then(res => {
        const data = res.data.cubeList
        data.forEach((val,key) => {

          if (val.type == 'luckyCube') {
            this.luckyCube.data.push(val)
            this.luckyCube.state=val.enable
          } else {
            this.diamondCube.data.push(val)
            this.diamondCube.state=val.enable
          }
        })
      })
      getAll(this.admin).then(res => {
        const data = res.data.giftList
        console.log(data)
        data.forEach((val, key) => {
          val.disabled = false
        })
        this.giflist = data
        this.Lgiflist = data
        this.Dgiflist = data
      })
    },
  }
</script>

<style scoped lang="scss">
  .head-ul {
    display: flex;
    height: 33px;
    position: relative;
    bottom: -1px;
    z-index: 9;
  }

  .head-ul>li {
    height: 32px;
    padding: 0 8px;
    line-height: 32px;
    color: #333333;
    border-left: 1px solid #dce3ed;
    border-top: 1px solid #dce3ed;
    border-right: 1px solid #dce3ed;
    margin-left: 15px;
    background-color: #FFFFFF;
  }

  .R-body {
    border: 1px solid #dce3ed;
    width: 97%;
    padding: 10px;
    overflow: hidden;
  }

  td {
    border-bottom: 1px solid #dce3ed;

    font-size: 16px;
  }

  .el-scrollbar ul {
    display: block;
  }

  .R-right {
    text-align: right;
    padding-right: 15px;
    color: #777;
  }

  .el-select-dropdown__wrap ul,
  .el-scrollbar__wrap ul {
    display: block;
  }

  span {
    margin-left: 15px;
  }

  .el-scrollbar .el-select-dropdown__item {
    height: 100%;
  }

  img {
    width: 50px;
    height: 50px;
  }

  .el-button {
    margin: 5px 0;
  }
</style>
